<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Flex-item : Style List</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" href="../assets/img/apple-touch-icon.png">
	<link rel="icon" href="../assets/img/favicon.png">

	<!-- Style custom *** CSS -->
	<style id="demoCSS" type="text/css">
		/* Demo's CSS here */

	</style>

	<link href="flex.css" rel="stylesheet">

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<script
		src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div id="demoHTML">
					<!--Demo's html here-->
					<h4>1. order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0</h4>
					<div class="container container-order">
						<div class="item item1">1</div>
						<div class="item item2">2</div>
						<div class="item item3">3</div>
						<div class="item item4">4</div>
						<div class="item item5">5</div>
					</div>
					<h4>2. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间</h4>
					<h5>默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。</h5>
					<h5>当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。</h5>
					<h5 class="title">2.1 flex: 0 1 auto;</h5>
					<div class="container container-basis-0">
						<div class="item item1">1</div>
						<div class="item item2">2</div>
						<div class="item item3">3</div>
						<div class="item item4">4</div>
						<div class="item item5">5</div>
					</div>
					<h5 class="title">2.2 flex: 0 1 200px;</h5>
					<div class="container container-basis-1">
						<div class="item item1">1</div>
						<div class="item item2">2</div>
						<div class="item item3">3</div>
						<div class="item item4">4</div>
						<div class="item item5">5</div>
					</div>
					<h5 class="title">2.3 item2/item4 = flex: 0 1 300px;</h5>
					<div class="container container-basis-2">
						<div class="item item1">1</div>
						<div class="item item2">2</div>
						<div class="item item3">3</div>
						<div class="item item4">4</div>
						<div class="item item5">5</div>
					</div>
					<h4>3. flex-grow: 定义项目的放大比例</h4>
					<h5 class="title">item2 = flex: 2 0 100px;</h5>
					<div class="container container-grow">
						<div class="item item1">1</div>
						<div class="item item2">2</div>
						<div class="item item3">3</div>
						<div class="item item4">4</div>
						<div class="item item5">5</div>
						<div class="item item6">6</div>
					</div>
					<h4>4. flex-shrink: 定义了项目的缩小比例</h4>
					<div class="container container-shrink">
						<div class="item item1">1</div>
						<div class="item item2">2</div>
						<div class="item item3">3</div>
						<div class="item item4">4</div>
						<div class="item item5">5</div>
						<div class="item item6">6</div>
					</div>
					<h4>5. align-self: 允许单个项目有与其他项目不一样的对齐方式</h4>
					<h5 class="title">item2 = align-self: flex-end</h5>
					<div class="container container-align align-flex-start container-align-self">
						<div class="item item-align item1">1</div>
						<div class="item item-align item2">2</div>
						<div class="item item-align item3">3</div>
						<div class="item item-align item4">4</div>
						<div class="item item-align item5">5</div>
					</div>
				</div>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.js"></script>

<!-- Script Demo *** JS -->
<script id="demoJS" type="text/javascript">
	// Demo's JS here

</script>

</body>
</html>